import { t } from 'i18next'
import { useEffect, useReducer, useRef } from 'react'
import { IAction } from './interface'
import { defaultPersonalConfig, IPersonalConfig } from '@/api/personalConfig/interface'
import { useGlobalStore } from '@/store/global'
import { fetchSavePersonalConfig } from '@/api/personalConfig'
import jumpPage from '@/utils/jumpPage'
import Alert from '@/components/Alert'
function reducer(state: IPersonalConfig, action: IAction) {
	switch (action.type) {
		case 'init':
			return { ...(action.payLoad as IPersonalConfig) }
		case 'setHomeType':
			return { ...state, home_type: action.payLoad }
		case 'setMtPortraitType':
			return { ...state, mt_portrait_type: action.payLoad }
		case 'setMtOrderType':
			return { ...state, mt_order_type: action.payLoad }
		case 'setMonitorType':
			return { ...state, monitor_type: action.payLoad }
		case 'setRollCallType':
			return { ...state, roll_call_type: action.payLoad }
		case 'setCameraOperation':
			return { ...state, mt_operate: { ...state.mt_operate, camera_operation: action.payLoad } }
		case 'setChairman':
			return { ...state, mt_operate: { ...state.mt_operate, chairman: action.payLoad } }
		case 'setDcs':
			return { ...state, mt_operate: { ...state.mt_operate, dcs: action.payLoad } }
		case 'setDoubleFlow':
			return { ...state, mt_operate: { ...state.mt_operate, doubleflow: action.payLoad } }
		case 'setMix':
			return { ...state, mt_operate: { ...state.mt_operate, mix: action.payLoad } }
		case 'setForceBrd':
			return { ...state, mt_operate: { ...state.mt_operate, force_brd: action.payLoad } }
		case 'setMtDeleteOffline':
			return {
				...state,
				mt_operate: { ...state.mt_operate, mt_delete_offline: action.payLoad },
			}
		case 'setMtDeleteOnline':
			return { ...state, mt_operate: { ...state.mt_operate, mt_delete_online: action.payLoad } }
		case 'setMtInfoOffline':
			return { ...state, mt_operate: { ...state.mt_operate, mt_info_offline: action.payLoad } }
		case 'setMtInfoOnline':
			return { ...state, mt_operate: { ...state.mt_operate, mt_info_online: action.payLoad } }
		case 'setMtOffline':
			return { ...state, mt_operate: { ...state.mt_operate, mt_offline: action.payLoad } }
		case 'setMtOnline':
			return { ...state, mt_operate: { ...state.mt_operate, mt_online: action.payLoad } }
		case 'setMtVideo':
			return { ...state, mt_operate: { ...state.mt_operate, mt_video: action.payLoad } }
		case 'setMute':
			return { ...state, mt_operate: { ...state.mt_operate, mute: action.payLoad } }
		case 'setOftenMt':
			return { ...state, mt_operate: { ...state.mt_operate, often_mt: action.payLoad } }
		case 'setSelect':
			return { ...state, mt_operate: { ...state.mt_operate, select: action.payLoad } }
		case 'setSilence':
			return { ...state, mt_operate: { ...state.mt_operate, silence: action.payLoad } }
		case 'setSpeaker':
			return { ...state, mt_operate: { ...state.mt_operate, speaker: action.payLoad } }
		case 'setUpload':
			return { ...state, mt_operate: { ...state.mt_operate, upload: action.payLoad } }
		case 'setVmp':
			return { ...state, mt_operate: { ...state.mt_operate, vmp: action.payLoad } }
		case 'setMtAdd':
			return { ...state, mcc_operate: { ...state.mcc_operate, mt_add: action.payLoad } }
		case 'setMtAddAll':
			return { ...state, mcc_operate: { ...state.mcc_operate, mt_add_all: action.payLoad } }
		case 'setVip':
			return { ...state, mcc_operate: { ...state.mcc_operate, vip: action.payLoad } }
		case 'setMccMute':
			return { ...state, mcc_operate: { ...state.mcc_operate, mute: action.payLoad } }
		case 'setMccSilence':
			return { ...state, mcc_operate: { ...state.mcc_operate, silence: action.payLoad } }
		case 'setMtSelect':
			return { ...state, mcc_operate: { ...state.mcc_operate, mt_select: action.payLoad } }
		case 'setMccVmp':
			return { ...state, mcc_operate: { ...state.mcc_operate, vmp: action.payLoad } }
		case 'setMccMix':
			return { ...state, mcc_operate: { ...state.mcc_operate, mix: action.payLoad } }
		case 'setTVWall':
			return { ...state, mcc_operate: { ...state.mcc_operate, tvwall: action.payLoad } }
		case 'setMeetingPoll':
			return { ...state, mcc_operate: { ...state.mcc_operate, meeting_poll: action.payLoad } }
		case 'setChairmanPoll':
			return { ...state, mcc_operate: { ...state.mcc_operate, chairman_poll: action.payLoad } }
		case 'setRollCall':
			return { ...state, mcc_operate: { ...state.mcc_operate, rollcall: action.payLoad } }
		case 'setMtBatchDelete':
			return {
				...state,
				mcc_operate: { ...state.mcc_operate, mt_batch_delete: action.payLoad },
			}
		case 'setVideoLive':
			return { ...state, mcc_operate: { ...state.mcc_operate, video_live: action.payLoad } }
		case 'setMeetingVideo':
			return { ...state, mcc_operate: { ...state.mcc_operate, meeting_video: action.payLoad } }
		case 'setMtBatchOffline':
			return {
				...state,
				mcc_operate: { ...state.mcc_operate, mt_batch_offline: action.payLoad },
			}
		case 'setMsg':
			return { ...state, mcc_operate: { ...state.mcc_operate, msg: action.payLoad } }
		case 'setBroadcast':
			return { ...state, mcc_operate: { ...state.mcc_operate, broadcast: action.payLoad } }
		case 'setSpeakerQueue':
			return { ...state, mcc_operate: { ...state.mcc_operate, speaker_queue: action.payLoad } }
		case 'setVoiceInspire':
			return { ...state, mcc_operate: { ...state.mcc_operate, voice_inspire: action.payLoad } }
		case 'setMccUpload':
			return { ...state, mcc_operate: { ...state.mcc_operate, upload: action.payLoad } }
		case 'setDataMeeting':
			return { ...state, mcc_operate: { ...state.mcc_operate, data_meeting: action.payLoad } }
		case 'setMtRecord':
			return { ...state, mcc_operate: { ...state.mcc_operate, mt_record: action.payLoad } }
		case 'setMccRecall':
			return { ...state, mcc_operate: { ...state.mcc_operate, recall: action.payLoad } }
		case 'setFileManage':
			return { ...state, mcc_operate: { ...state.mcc_operate, file_manage: action.payLoad } }
		case 'setMonitor':
			return { ...state, mcc_operate: { ...state.mcc_operate, monitor: action.payLoad } }
		case 'setAI':
			return { ...state, mcc_operate: { ...state.mcc_operate, ai: action.payLoad } }
		case 'setMccMtVmp':
			return { ...state, mcc_operate: { ...state.mcc_operate, mtvmp: action.payLoad } }
		default:
			return state
	}
}
export const usePersonalConfig = () => {
	/*
	获得store的user
	*/
	const user = useGlobalStore((state) => state.user)
	/*
	1.defaultPersonalConfig 默认值
	export const defaultPersonalConfig: IPersonalConfig = {
		home_type: 3,
		monitor_type: 1,
		mt_portrait_type: 1,
		mt_order_type: 1,
		roll_call_type: 1,
		mt_operate: {
			camera_operation: 0,
			chairman: 1,
			dcs: 0,
			doubleflow: 1,
			force_brd: 0,
			mix: 0,
			mt_delete_offline: 1,
			mt_delete_online: 0,
			mt_info_offline: 1,
			mt_info_online: 1,
			mt_offline: 1,
			mt_online: 1,
			mt_video: 0,
			mute: 1,
			often_mt: 1,
			select: 0,
			silence: 0,
			speaker: 1,
			upload: 0,
			vmp: 0,
		},
		mcc_operate: {
			ai: 0,
			broadcast: 0,
			chairman_poll: 1,
			data_meeting: 0,
			file_manage: 0,
			meeting_poll: 1,
			meeting_space: 0,
			meeting_video: 0,
			mix: 1,
			monitor: 0,
			msg: 0,
			mt_add: 1,
			mt_add_all: 1,
			mt_batch_delete: 1,
			mt_batch_offline: 0,
			mt_record: 0,
			mt_select: 1,
			mute: 1,
			recall: 0,
			rollcall: 1,
			silence: 0,
			tvwall: 1,
			upload: 0,
			video_live: 1,
			vip: 1,
			vmp: 1,
			mtvmp: 1,
			voice_inspire: 0,
		},
	}

	2.originalData user中存储的personal_config
	*/
	const originalData = useRef<IPersonalConfig>(defaultPersonalConfig)
	/*
	# useReducer

	## useReducer 钩子函数简要说明
	useReducer 钩子函数的作用跟 useState 一样，即对数据进行管理，
	但是 useReducer 对状态数据的管理是通过配套的 dispatch 方法来管理，这也是和 useState 不同的地方。

	useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，
	并返回当前的 state 以及与其配套的 dispatch 方法。
	（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

	在某些场景下，useReducer 会比 useState 更适用，
	例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。
	并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，
	因为你可以向子组件传递 dispatch 而不是回调函数 。

	## 基本结构
	useReducer 接受两个参数：一个 reducer 函数和一个初始状态。它返回一个包含当前状态和一个 dispatch 函数的数组。
	```ts
	const [state, dispatch] = useReducer(reducer, initialState);
	```

	## demo
	```
	function Counter() {
		const initialState = {count: 0}

		const reducer = (state, action) => {
			switch (action.type) {
			case 'increment':
				return {count: state.count + 1}
			case 'decrement':
				return {count: state.count - 1}
			default:
				throw new Error()
			}
		}

		const [state, dispatch] = useReducer(reducer, initialState)

		return (
			<>
				<p>您点击了 {state.count} 次</p>
				<Button variant="outlined" onClick={() => dispatch({type: 'decrement'})}>递减</Button>
				<Button variant="outlined" onClick={() => dispatch({type: 'increment'})} style={{marginLeft: 15}}>递增</Button>
			</>
		)
	}

	dispatch 可以传入子组件，在子组件中使用



	https://blog.csdn.net/Jas3000/article/details/124168218 
	https://juejin.cn/post/6908540615315685384


	# 关于这段代码
	这段代码是使用React和TypeScript编写的，其中useReducer是一个React Hook，用于在组件中管理复杂的状态逻辑。
	下面我会逐步解释这段代码的各个部分以及它的优势。

	## ReducerMaker
	ReducerMaker在这里不是一个内置的TypeScript类型，而是看起来像是一个自定义的类型助手（Type Helper），
	用于创建一个类型安全的reducer action。
	这个类型助手可能是从某个库中导入的，或者在项目的某个地方定义的。
	其作用是简化action类型的声明，使得每个action都有一个对应的类型，从而提高代码的可维护性和减少运行时错误。

	## 代码解释
	reducer函数：这是一个普通的reducer函数，它接收当前状态state和一个action，然后根据action的类型返回新的状态。

	init case：当action类型为'init'时，reducer将使用action的payload来初始化状态。

	setHomeType case：当action类型为'setHomeType'时，reducer将更新home_type属性。

	setMtPortraitType case：当action类型为'setMtPortraitType'时，reducer将更新mt_portrait_type属性。

	default case：对于任何未处理的action类型，reducer将返回当前状态不变。

	useReducer Hook：使用useReducer Hook来初始化状态和分发action。这里defaultPersonalConfig是初始状态，reducer是上面定义的reducer函数。

	IAction类型：定义了一个IAction接口，使用ReducerMaker来确保每个action都有一个明确的类型。

	## 优势
	类型安全：通过TypeScript和自定义的ReducerMaker，代码具有很高的类型安全性，可以在编译时捕获错误。

	可维护性：使用useReducer可以更好地组织复杂的状态逻辑，尤其是在状态逻辑较为复杂或者有多个子值时。

	可读性：通过将状态更新逻辑集中在reducer函数中，代码的可读性和可维护性得到提高。

	性能：useReducer通常在处理复杂的状态逻辑时比useState有更好的性能表现，因为它可以避免不必要的渲染。

	## 与useState的区别
	useState是React提供的用于在函数组件中添加state的Hook，它适用于简单的状态逻辑。
	useReducer则适用于复杂的状态逻辑，它允许你将状态更新逻辑集中在一个地方，并且可以更清晰地处理多个子值的状态更新。
	总的来说，useReducer提供了一种更结构化的方式来管理状态，特别是在状态逻辑较为复杂或者需要多个子值时。
	而useState则更适用于简单的状态逻辑。
	```
	*/
	const [personalConfigInfo, dispatch] = useReducer(reducer, defaultPersonalConfig)
	/*
	useEffect/user?.personal_config  store中的personal_config

	1.originalData 设置为user中存储的personal_config
	2.dispatch init 使用 useReducer 修改 persomalConfigInfo 的数据
	*/
	useEffect(() => {
		if (user?.personal_config) {
			originalData.current = user?.personal_config
			dispatch({ type: 'init', payLoad: user?.personal_config })
		}
	}, [user?.personal_config])
	/*
	saveConfigInfo 点击保存按钮 

	1.fetchSavePersonalConfig  保存个性化设置
	2.jumpPage 跳转页面 
	*/
	const saveConfigInfo = () => {
		fetchSavePersonalConfig(personalConfigInfo).then((res) => {
			if (res) {
				jumpPage('personalConfig')
			} else {
				Alert(t('保存失败！'))
			}
		})
	}
	/*
	restoreConfigInfo  点击取消按钮 

	1.dispatch  
	*/
	const restoreConfigInfo = () => {
		dispatch({ type: 'init', payLoad: originalData.current })
	}
	return {
		personalConfigInfo,
		saveConfigInfo,
		restoreConfigInfo,
		dispatch,
	}
}
